<template>
  <div class="index">
    <!-- logo  顶部导航展示栏-->
    <div class="app-view">
      <div class="app-view-left">
        <div :style="{width:isCollapse?'64px':220+'px'}" class="logo">
          <el-image
              :style="{width:isCollapse?'64px':220+'px'}"
              :src="isCollapse?require('@/assets/favicon.jpg'):require('@/assets/logo_title.png')"
              :fit="'fill'"
          ></el-image>
        </div>
        <el-menu
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            :collapse="isCollapse"
            :default-active="'2-2-1'"
            text-color="#fff"
            ref="ul_width"
        >
          <div v-for="(item,index)  in navList" v-bind:key="index">
            <el-menu-item
                index="0"
                v-if="!item.list"
                class="el-menu-item1"
                :class="item.edit==true?'el-menu-item-bk':'el-menu-item-nobk1'"
                :style="{borderLeft:item.edit?'2px solid #ffffff !important':'none'}"
                @click.native="toRoute(item.route,null)"
            >
              <i class="el-icon-s-home"></i>
              <span slot="title">{{item.title}}</span>
            </el-menu-item>
            <el-submenu :index="item.index" v-else text-color="#fff">
              <template slot="title">
                <i :class="item.icon_class"></i>
                <span slot="title" v-show="!isCollapse">{{item.title}}</span>
              </template>
              <el-menu-item
                  v-for="(items,index2)  in item.list"
                  v-bind:key="index2"
                  @click.native="toRoute(items.route,item)"
                  :class="items.edit==true?'el-menu-item-bk':'el-menu-item-nobk'"
                  :style="{borderLeft:items.edit?'2px solid #ffffff !important':'none'}"
              >
                <div>{{items.title}}</div>
              </el-menu-item>
            </el-submenu>
          </div>
        </el-menu>
      </div>

      <div class="r-view">
        <div class="nav-r-top">
          <div class="l-flex">
            <div class="open_close" @click="switchover">
              <i :class="isCollapse?'el-icon-s-unfold':'el-icon-s-fold'"></i>
            </div>

            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item
                  class="cp"
                  v-for="(item,index) in nav_titleList"
                  v-bind:key="index"
                  @click.native="breadcrumb_nav_to(item)"
              >{{item.title}}
              </el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <div class="log_out">
            <div class="login_user_title flex felxR">
              <div>欢迎 周先生 登录平台</div>
            </div>
            <el-badge :value="msg_info.count" class="item">
              <el-button type="info" icon="el-icon-message" circle @click.navite="drawer = true"></el-button>

              <el-drawer
                  :visible.sync="drawer"
                  :with-header="false">
                <div class="msg_info">
                  <div class="msg_header">消息</div>
                  <div class="all-read" @click="readMsg('all')">全部已读</div>
                  <div class="msg_content">
                    <div class="msg_item" v-for="msg in msg_info.list" :key="msg.message_id"
                         @click="readMsg(msg.message_id)">
                      <div class="red_icon"></div>
                      <div class="msg_text">{{msg.content}}</div>
                    </div>
                  </div>
                </div>
              </el-drawer>
            </el-badge>
            <div class="log_out_btn" @click="log_out">退出</div>
          </div>
        </div>
        <indexs v-if="this.$route.path=='/'||this.$route.path==''"></indexs>
        <transition name="component-fade" mode="out-in">
          <keep-alive>
            <router-view v-if="$route.meta.keepAlive"></router-view>
          </keep-alive>
        </transition>
        <transition name="component-fade" mode="out-in">
          <router-view v-if="!$route.meta.keepAlive"></router-view>
        </transition>
      </div>
    </div>
  </div>
</template>


<script>
	import indexs from "./home/index";

	export default {
		name: "index",
		data() {
			return {
				isCollapse: false, // 伸缩展开
				defaultActive: "0", // 主菜单默认激活
				defaultActive1: "0", // 子菜单默认激活
				W_with: "", // 展示视图宽度
				isCollapse_width: 0, // logo 宽度
				nav_titleList: [], // 顶部导航
				navList: [],
				openedsList: [], //  展开栏展示
				msg_info: {},
				drawer: false
			};
		},
		computed: {},
		// 属性监听
		watch: {
			"$store.state.nav_titleList": function (data) {
				this.nav_titleList = data || [];
				localStorage.setItem("nav_titleList", JSON.stringify(data || []));
			}
		},
		// 页面事件
		methods: {

			handleOpen(key, keyPath) {
				let list = this.openedsList;
				list.push(key);
				this.openedsList = list;
			},
			handleClose(key, keyPath) {
				let list = this.openedsList || [];
				list.forEach((v, k) => {
					if (v == key) {
						list.splice(k, 1);
					}
				});
				this.openedsList = list;
			},
			// 收缩导航
			switchover() {
				this.isCollapse = !this.isCollapse;
			},
			//  退出登录-将清楚所有缓存数据和全局变量
			log_out() {
				this.$router.replace({path: "/login"});
			},
			//  打开指定的菜单
			openMen(data) {
				if (data.index == 0 || data.index == undefined) {
					return;
				}
				let index_ = data.index.split("-")[0] || "1";
				let openedsList_ = this.openedsList || [];
				openedsList_.unshift(index_ + "");
				this.openedsList = openedsList_;
			},
			//  路由
			toRoute(path, obj) {
				let list = this.navList || [];
				if (path === this.$route.path) {
					return
				}
				this.changeNav_show(path);
				this.$toRoutePath({
					path: path,
					edit: true,
					query: {}
				});
			},
			changeNav_show() {
				let list = this.navList || [],
					fn = list => {
						list.forEach((v, k) => {
							if (v.list && Array.isArray(v.list)) {
								fn(v.list);
							} else {
								if (v.route == arguments[0]) {
									v.edit = true;
								} else {
									v.edit = false;
								}
							}
						});
					};
				fn(list);
			},
			// 点击面包屑
			breadcrumb_nav_to(data) {
				console.log('come_data', data);
				if (data.path == '/') return;

				this.changeNav_show(data.path);
				this.$toRoutePath({
					path: data.path,
					edit: true,
					query: {}
				});
			},
			readMsg(id) {
				let message_id = id + '';
				if (id == 'all') {
					message_id = '';
					this.msg_info.list.forEach(msg => {
						message_id += msg.message_id + ','
					});
					message_id = message_id.substring(message_id.length - 1, 0)
				}
				let post_data = {
					message_id: message_id
				}
				this.$raxios.post(this.$mapapi.admin_saveMessageRead, {data: post_data}).then(res => {
					if (res.code == 200) {
						if (id == 'all') {
							this.drawer = false;
							this.msg_info.count = 0;
						} else {
							this.msg_info.list = this.msg_info.list.filter(msg => {
								return msg.message_id != id
							});
							this.msg_info.count = this.msg_info.list.length;
							if (this.msg_info.count == 0) {
								this.drawer = false;
							}
						}
					}else{
						this.$message.error(res.msg)
          }
				}).catch(res => {
					this.$message.error(res.msg || '服务繁忙请稍后再试');
				})
			}
		},
		// 页面响应完
		mounted() {
			this.navList = this.$store.state.navList;
			if (localStorage.getItem("nav_titleList")) {
				this.nav_titleList = JSON.parse(
					localStorage.getItem("nav_titleList") || []
				);
			}
			this.$raxios.post(this.$mapapi.admin_getMessageInfo, {}).then(res => {
				if (res.code === 200) {
					this.msg_info = res.data;
				}else{
					this.$message.error(res.msg)
        }
			}).catch(res => {
				this.$message.error(res.msg || '服务繁忙请稍后再试');
			})
		},
		components: {
			indexs
		}
	};
</script>

<style lang="less" :scope="true" src="@/style/index.less">
</style>
